<template>
  <!-- ref可以在标签上使用可以获取到这个元素 在组件上使用获取的是组建的实例 -->
  <div class="chart-box" ref="chart"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        title: {
          text: "标题",
        },
      });
    },
    draw(config) {
      if (!this.chart) this.init();
      this.chart.setOption(config);
    },
    resize() {
      if (!this.chart) this.init();
      this.chart.resize();
    },
  },
  mounted() {
    this.init();
  },
  beforeDestroy(){
    this.chart && this.chart.dispose();
  }
};
</script>
<style lang="sass" scoped>
.chart-box
  background: #f3f3f3
  border-radius: 8px
</style>
